<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Upload File Use SWFUpload</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/swfupload.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/swfupload.queue.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/upload.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/upload.css" />
</head>

<body>
	<div id="photos-upload">
		<form action="#" method="get" id="upload">
			<input type="hidden" value="" id="uploadFiles" name="pid" />
			
			<div class="upload-list hidden">
				<div class="hd">
					<span class="name">照片</span>
					<span class="size">大小</span> 
					<span class="delete">删除?</span>
				</div>
				<div class="bd">
					<fieldset class="flash" id="fsUploadProgress"></fieldset>
				</div>
			</div>
			
			<div id="divStatus"></div>
			
			<div id="upload-btn">
				<span id="btn_holder"></span>
			</div>
			
			<div class="upload-tips"></div>
			
			<div id="upload-status" class="hidden">
				<span class="num">共&nbsp;<b></b>&nbsp;张</span> 
				<span class="continue-wrapper">&nbsp;|&nbsp;<a href="#" class="continue">继续添加照片</a></span> 
				<span class="total-size">总计：<b></b></span>
			</div>
			
			<div id="has-error" class="hidden"><b></b>张照片上传失败。&nbsp; 
				<span class="nextstep hidden">&gt;&nbsp;<a href="#">继续下一步</a>？</span>
			</div>
			
			<div class="opt-btns hidden">
				<input type="button" id="upload-start" value="开始上传" class="btn-green" /> 
				<a id="btnCancel" href="#">取消上传</a>
			</div>
			
			<noscript>
				<div class="message">您的浏览器不支持javascript，不能使用此页面的全部功能。请换用其他浏览器或者开启对javascript的支持。</div>
			</noscript>
			
			<div id="noflash" class="attn hidden">
				您没有安装flash播放器，或者您的flash版本不够，无法使用上传功能. 请安装最新版本的flashplayer.(<a
					href="http://fpdownload.macromedia.com/get/flashplayer/current/licensing/win/install_flash_player_10.exe">IE用户</a>/<a
					href="http://fpdownload.macromedia.com/get/flashplayer/current/install_flash_player.exe">非IE用户</a>官方下载
				)
			</div>
			
			<input id="complete" type="submit" class="hidden minisubmit" value="&gt;&nbsp;下一步,填写图片信息" />
		</form>
		
		<div id="old-portal">
			<br />无法上传？<a href="#">使用普通方式上传照片</a>
		</div>
	</div>
	
	<script> 

		oForm = $('#upload'), oNextStep = $('.nextstep a'), oUploadFiles = $('#uploadFiles'), oUploadBtn = $('#upload-btn'), oUploadStatus = $('#upload-status'), oStartUpload = $('#upload-start'), oBtnCancel = $('#btnCancel'), oOptBtns = $('.opt-btns'), oUploadTips = $('.upload-tips'), TMPL_UPLOAD_TIPS = '提示：每次最多可以<b>批量上传</b>二十张照片，按着&nbsp;“{CMD}”&nbsp;键可以一次选择多张照片';
		
		var localConfig = {
			debug : true,
			flash_url : '<%=request.getContextPath()%>/swf/swfupload.swf',
			upload_url : '<%=request.getContextPath()%>/image/upload',
			button_image_url : '<%=request.getContextPath()%>/images/upload-btns.png'
		};
		jQuery.extend(settings,localConfig);
		
		swfup = new SWFUpload(settings);

		oUploadBtn.show();
		oUploadFiles.val('');

		// init tips
		oUploadTips.html(TMPL_UPLOAD_TIPS.replace('{CMD}', navigator.userAgent.search('Mac') !== -1 ? 'command' : 'ctrl'));
		
		// cancel queue
		oBtnCancel.click(function(e) {
			e.preventDefault();
			swfup.cancelQueue();
			oUploadFiles.val('');
			oOptBtns.addClass('hidden');
			oUploadStatus.addClass('hidden');
			oUploadBtn.removeAttr('style');
			oStartUpload.val('开始上传').removeAttr('disabled');
			setTimeout(function() { oUploadTips.removeClass('hidden'); }, $.browser.msie ? 1200 : 800);
		});

		// start upload 
		oStartUpload.click(function() {
			swfup.startUpload();
		});

		// continue upload
		oUploadStatus.find('.continue').click(function(e) {
			e.preventDefault();
			oUploadBtn.removeAttr('style');
			oUploadStatus.addClass('hidden');
		});

		oNextStep.click(function(e) {
			e.preventDefault();
			oForm.submit();
		});
	</script>
</body>
</html>